<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-26 11:16:35
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-07 15:40:25
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\dept\quarter-performance.vue
-->
<template>
  <div class="component-container">
    <el-row>
      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" class="float-right mb-10"> 导出 </el-button>
    </el-row>
    <div class="flex-table">
      <el-table :data="workList" ref="table" border style="width: 100%" height="100%" header-cell-class-name="pre-wrap" v-loading="loading">
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="站办所" min-width="160" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="gradeDict" label="考评等次" width="180" align="center">
          <template slot-scope="scope">
            <dict-tag v-if="scope.row.gradeDict" :options="dict.type.biz_work_grade" :value="scope.row.gradeDict"></dict-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in columns" :key="item.label" :label="item.label" prop="total" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.detailsJson[index].score }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="总得分" align="center"> </el-table-column>
        <el-table-column prop="remarks" min-width="180" label="备注" align="center">
          <template slot-scope="scope">
            <p class="pre-wrap text-left">{{ scope.row.remarks || '-' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="rank" label="全镇排名" align="center" v-if="hasPermi('performance-inventory:view:ranking')"> </el-table-column>
        <el-table-column prop="rank" label="全镇排名" align="center" v-if="hasPermi('performance-inventory:view:ranking-range')">
          <template slot-scope="scope">
            <span>{{ formatRankingRange(scope.row.rank) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listResult } from '@/api/work-approval/assessment-grades'
import { getConfigKey } from '@/api/system/config'

export default {
  name: 'performance-inventory_dept_quarter-performance',
  dicts: ['biz_work_grade'],
  props: {
    queryForm: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data() {
    return {
      rankingRange: '',
      columns: [],
      loading: false,
      quarterOptions: [],
      workList: [],
      queryParams: {}
    }
  },
  computed: {},
  created() {
    this.getConfigKey()
  },
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        this.queryParams = query
        this.getList()
      }
    }
  },
  methods: {
    async getConfigKey() {
      await getConfigKey('sys.performanceGrade.rankInterval').then(res => {
        this.rankingRange = res.msg || 0
      })
    },
    // 排名范围格式
    formatRankingRange(ranking) {
      let range = '-'
      if (!this.rankingRange || this.rankingRange === 0) {
        return range
      }
      if (ranking <= this.rankingRange) {
        range = `1-${this.rankingRange}`
      } else {
        while (ranking % this.rankingRange !== 0) {
          ranking++
        }
        range = `${ranking - this.rankingRange + 1}-${ranking}`
      }
      return range
    },
    hasPermi(permi) {
      return this.$auth.hasPermi(permi)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        '/api/deptQuarterScoreCollects/results/excels',
        {
          ...this.queryParams
        },
        `站办所绩效汇总_${new Date().getTime()}.xlsx`
      )
    },
    getList() {
      this.loading = true
      listResult(this.queryParams)
        .then(res => {
          this.loading = false
          this.workList = res.data
          this.columns = res.data[0]['detailsJson'].map(item => {
            return { label: item.label, value: item.score }
          })
          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        })
        .catch(err => (this.loading = false))
    },
    // 刷新
    handleRefresh() {
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.el-input-number--medium {
  width: auto;
}

.pre-wrap .cell {
  white-space: pre-wrap;
}
</style>
